<template>
  <div>
    <div class="boxMain">
      <div class="login">
        <div class="pic">
          <img src="@/assets/logo1.jpg" alt />
        </div>
        <div class="form-floating mb-3 mt-3 ms-4">
          <input
            type="text"
            class="form-control"
            id="floatingInput"
            placeholder="name@example.com"
            v-model="username"
          />
          <label for="floatingInput">Username</label>
        </div>
        <div class="form-floating ms-4">
          <input
            type="password"
            class="form-control"
            id="floatingPassword"
            placeholder="Password"
            v-model="password"
          />
          <label for="floatingPassword">Password</label>
        </div>
        <button type="button" class="btn btn-success btn-lg" @click="login">登入</button>
        <button type="button" class="btn btn-danger btn-lg" @click="register">注册</button>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      username: "",
      password: "",
      userlist: []
    };
  },
  methods: {
    login() {
      axios
        .get("http://localhost:5000/getuser", {
          params: {
            username: this.username,
            password: this.password
          } 
        })
        .then(res => {
          console.log(res.data), (this.userlist = res.data);
          if (res.data != "") {
            // 储存到vuex和localstroge
            this.$store.state.userInfo.username = this.username;
            this.$store.state.userInfo.password = this.password;
            this.$store.state.userInfo.isLogin = true;
            // 跳转首页
            this.$router.push({
              path: "/"
            });
          } else {
            alert("用户名或密码错误！");
          }
        })
        .catch(function(error) {
          // 请求失败处理
          console.log(error);
        });
      // console.log(this.userlist);
      // if (this.userlist.length > 0) {

      //   // 储存到vuex和localstroge
      //   this.$store.state.userInfo.username = this.username;
      //   this.$store.state.userInfo.password = this.password;
      //   this.$store.state.userInfo.isLogin = true;
      //   // 跳转首页
      //   this.$router.push({
      //     path: "/"
      //   });
      // } else {
      //   alert("用户名或密码错误！");
      // }
    },
    register() {
      this.$router.push({
        path: "/register"
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.boxMain {
  width: 100%;
  height: 690px;
  background-color: rgb(71, 82, 92);
  background: url("@/assets/car1.jpg") no-repeat;
  background-size: 100%;

  .login {
    width: 30%;
    height: 600px;
    float: right;
    margin: 30px;
    .pic {
      width: 90%;
      height: 300px;
      margin: auto;
      margin-top: 20px;
      img {
        height: 300px;
      }
    }
    input {
      width: 94%;
    }
    button {
      margin: 30px 40px;
      width: 100px;
    }
  }
}
</style>